<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" title="">
            <li id="first1">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
            <!-- <li>05</li> -->
        </ul>
    </div>
    <!-- <span>12132</span>
    <span>12132</span>
    <span>12132</span>
    <span>12132</span> -->

</body>
<script>
    // 节点
    // 文档节点  元素节点  属性节点 文本节点 注释节点

    // 层级关系
    // 父节点
    // 子节点
    // 同胞节点  

    var one = document.querySelector(".one");
    console.log(one);

    // 父
    // 父节点  父元素    => 父节点和父元素没区别的
    // Element.parentNode
    // Element.parentElement

    // console.log(one.parentNode);
    // console.log(one.parentElement);

    // 子
    // 子节点  子元素
    // Element.childNodes    子节点(元素节点 文本节点 注释节点)
    // Element.children      子元素
    console.log(one.childNodes);
    console.log(one.children);

    // console.log(one.childNodes[0]);
    // console.log(one.childNodes[9]);

    // 第一个子节点  第一个子元素
    // Element.firstChild
    // Element.firstElementChild

    // console.log(one.firstChild);
    // console.log(one.firstElementChild);


    // 最后一个子节点  最后一个子元素
    // Element.lastChild
    // Element.lastElementChild
    // console.log(one.lastChild);
    // console.log(one.lastElementChild);


   // 同胞
   // 前一个 同胞节点  前一个 同级元素
   // Element.previousSibling            前一个节点
   // Element.previousElementSibling     前一个元素 
   
   var second = document.querySelector(".second");
   console.log(second.previousSibling);
   console.log(second.previousElementSibling);
   
   // 后一个 同胞节点  后一个 同级元素
   // Element.nextSibling            后一个节点
   // Element.nextElementSibling     后一个元素 

   var second = document.querySelector(".second");
   console.log(second.nextSibling);
   console.log(second.nextElementSibling);



</script>
</html>